<script setup>
import { GetAdminUserList, SaveOrEditAdminUser, delAdminUser } from "@/api/user"
import dayjs from "dayjs";
import { getCurrentInstance, ref } from "vue"
import { ElMessage } from "element-plus";

const { proxy } = getCurrentInstance()

const data = ref([])
const total = ref(0)
const params = ref({
	page: 1,
	pageSize: 10,
	keywords: ""
})
const form = ref({})

const dialogInfo = ref({
	visible: false,
	isEdit: false,
})

const rules = ref({
	username: [
		{ required: true, message: '请输入用户名', trigger: 'blur' }
	],
	phone: [
		{ required: true, message: '请输入手机号', trigger: 'blur' }
	],
	password: [
		{ required: true, message: '请输入密码', trigger: 'blur' }
	],
})

const getAppUserList = async () => {
	try {
		const res = await GetAdminUserList(params.value)
		data.value = res.records
		total.value = res.total
	} catch (e) {
	}
}

getAppUserList() // 调用方法

// 弹起弹层
const alertUserForm = (row = {}) => {
	dialogInfo.value.isEdit = Boolean(row.id)
	form.value = { ...row }
	dialogInfo.value.visible = true
}


const handleSizeChange = (size) => {
	params.value.pageSize = size
	getAppUserList()
}

const handleCurrentChange = (page) => {
	params.value.page = page
	getAppUserList()
}

const submit = () => {
	// 校验
	proxy.$refs.formRef.validate(async valid => {
		if (!valid) return
		await SaveOrEditAdminUser(form.value)
		ElMessage.success(dialogInfo.value.isEdit ? '编辑成功' : '新增成功')
		dialogInfo.value.visible = false
		await getAppUserList()
	})
}

const delAppUser = (row) => {
	proxy.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(async () => {
		await delAdminUser(row.id)
		ElMessage.success("删除完成")
		await getAppUserList()
	})
}

</script>

<template>
	<el-card>
		<!--搜索区域-->
		<el-row :gutter="20" class="mb-10px" justify="space-between">
			<el-col :span="6">
				<el-input placeholder="请输入关键字 ( Enter 键搜索 )" v-model="params.keywords" clearable @clear="getAppUserList"
					@keydown.enter="getAppUserList"></el-input>
			</el-col>
			<el-col :span="2">
				<el-button type="success" @click="alertUserForm">新增</el-button>
			</el-col>
		</el-row>
		<!--表格-->
		<el-table :data="data" border stripe>
			<el-table-column label="ID" prop="id"></el-table-column>
			<el-table-column label="用户名" prop="username"></el-table-column>
			<el-table-column label="手机号" prop="phone"></el-table-column>
			<el-table-column label="性别" prop="sex">
				<template #default="{ row }">
					{{ row.sex == 1 ? "男" : "女" }}
				</template>
			</el-table-column>
			<el-table-column label="创建时间">
				<template #default="{ row }">
					{{ dayjs(row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
				</template>
			</el-table-column>
			<el-table-column label="更新时间">
				<template #default="{ row }">
					{{ dayjs(row.updateTime).format("YYYY-MM-DD HH:mm:ss") }}
				</template>
			</el-table-column>
			<el-table-column label="操作" width="200">
				<template #default="{ row }">
					<el-button type="primary" @click="alertUserForm(row)">编辑</el-button>
					<el-button type="danger" @click="delAppUser(row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--分页-->
		<div class="mt-[10px] flex justify-end">
			<el-pagination v-model:current-page="params.page" v-model:page-size="params.pageSize"
				:page-sizes="[10, 20, 30, 40]" background layout="sizes, prev, pager, next" :total="total"
				@size-change="handleSizeChange" @current-change="handleCurrentChange" />
		</div>
		<!--弹层-->
		<Dialog v-model:visible="dialogInfo.visible" :title="dialogInfo.isEdit ? '编辑管理员' : '新增管理员'" @onSubmit="submit">
			<el-form label-width="80" label-position="left" class="p-[20px]" :model="form" ref="formRef" :rules="rules">
				<el-form-item label="用户名" class="w-3/4" prop="username">
					<el-input placeholder="请输入用户名" v-model="form.username"></el-input>
				</el-form-item>
				<el-form-item label="手机号" class="w-3/4" prop="phone">
					<el-input placeholder="请输入手机号" v-model="form.phone"></el-input>
				</el-form-item>
				<el-form-item label="密码" class="w-3/4" prop="password">
					<el-input placeholder="请输入密码" v-model="form.password" type="password" show-password></el-input>
				</el-form-item>
			</el-form>
		</Dialog>
	</el-card>
</template>

<style scoped lang="scss"></style>
